<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入初始化CSS文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共CSS文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
    <!-- 头部 -->
    <div class="xtx-login-header">
        <h1 class="login"></h1>
        <a href="index.html" class="home">进入网站首页</a>
    </div>

    <!-- 内容 -->
    <div class="xtx-login-main">
        <div class="w">
            <form action="">
                <div class="box">
                    <div class="tab-nav">
                        <a href="javascript:;" class="active">账户登录</a>
                        <a href="javascript:;">二维码登录</a>
                    </div>
                    <div class="tab-pane">
                        <div class="link">
                            <a href="javascript:;">手机验证码登录</a>
                        </div>
                        <div class="input">
                            <span class="iconfont icon-zhanghao"></span>
                            <input type="text" name="username" id="" placeholder="请输入用户名称/手机号码" required>
                        </div>
                        <div class="input">
                            <span class="iconfont icon-pass"></span>
                            <input type="password" name="password" id="" placeholder="请输入密码" required>
                        </div>
                        <div class="agree">
                            <label for="my-checkbox">
                                <input type="checkbox" name="agree" id="my-checkbox" value="1" class="remeber"
                                    checked="checked">
                                <span class="iconfont icon-xuanze"></span>
                            </label>
                            我已同意
                            <a href="javascript:;">《服务条款》</a>
                            和
                            <a href="javascript:;">《服务条款》</a>
                        </div>
                        <div class="btn clearfix">
                            <button type="submit" class="dl">登 录</button>
                            <a href="javascript:;" class="fl">忘记密码？</a>
                            <a href="register.html" target="_blank" class="fr">免费注册</a>
                        </div>
                    </div>
                    <div class="tab-pane" style="display: none;">
                        <img class="code" src="images/code.png" alt="">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 底部 -->
    <div class="xtx-login-footer">
        <div class="copyright">
            <p>
                <a href="javascript:;">关于我们</a>
                <a href="javascript:;">帮助中心</a>
                <a href="javascript:;">售后服务</a>
                <a href="javascript:;">配送与验收</a>
                <a href="javascript:;">商务合作</a>
                <a href="javascript:;">搜索推荐</a>
                <a href="javascript:;">友情链接</a>
            </p>
            <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
    </div>

    <script>
        let remeber = document.querySelector('.remeber');
        let uname = document.querySelector('[name=uname]');
        let password = document.querySelector('[name=password]');
        let form = document.querySelector('form');
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            if (!remeber.checked) {
                alert('请先同意协议');
                return;
            };
            let obj = {
                uname: uname.value,
                password: password.value
            }
            localStorage.setItem('data', JSON.stringify('obj'));
            location.href = 'index.html';
        })
        let data = JSON.parse(localStorage.getItem('data'));
        if (data) {
            uname.value = data.uname;
            password.value = data.password;
            remeber.checked = true;
        }
    </script>
</body>

</html>